<template>
	<a-card :bordered="false">
		<!-- 查询区域 -->
		<div class="table-page-search-wrapper">
			<a-form layout="inline" @keyup.enter.native="searchQuery">
				<a-row :gutter="24">
					<a-col :xl="6" :lg="7" :md="8" :sm="24">
						<a-form-item label="创建人">
							<a-input placeholder="请输入创建人" v-model="queryParam.createBy"></a-input>
						</a-form-item>
					</a-col>
					<a-col :xl="10" :lg="11" :md="12" :sm="24">
						<a-form-item label="创建日期">
							<j-date placeholder="请选择开始日期" class="query-group-cust" v-model="queryParam.createTime_begin"></j-date>
							<span class="query-group-split-cust"></span>
							<j-date placeholder="请选择结束日期" class="query-group-cust" v-model="queryParam.createTime_end"></j-date>
						</a-form-item>
					</a-col>
					<!-- <template v-if="toggleSearchStatus"> -->
					<a-col :xl="6" :lg="7" :md="8" :sm="24">
						<a-form-item label="物料料号">
							<a-input placeholder="请输入物料料号" v-model="queryParam.materielCode"></a-input>
						</a-form-item>
					</a-col>
					<a-col :xl="6" :lg="7" :md="8" :sm="24">
						<a-form-item label="品名">
							<a-input placeholder="请输入品名" v-model="queryParam.materielName"></a-input>
						</a-form-item>
					</a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="物料规格">
              <a-input placeholder="请输入物料规格" v-model="queryParam.materielGague"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="区域编码">
              <a-select v-model:value="areaCode"  placeholder="请选择区域" @change="getArea">
                <a-select-option  v-for="(item, index) in array" :value="item.areaCode" :key="index">{{item.areaName}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="位置编码">
              <a-select v-model:value="locationCode"  placeholder="请选择位置">
                <a-select-option  v-for="(item, index) in array2" :value="item.locationCode" :key="index">{{item.locationCode}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
					<!-- </template> -->
					<a-col :xl="6" :lg="7" :md="8" :sm="24">
						<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
							<a-button type="primary" @click="query" icon="search">查询</a-button>
							<a-button type="primary" @click="reset" icon="reload" style="margin-left: 8px">重置</a-button>
							<a @click="handleToggleSearch" style="margin-left: 8px">
								{{ toggleSearchStatus ? '收起' : '展开' }}
								<a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
							</a>
						</span>
					</a-col>
				</a-row>
			</a-form>
		</div>
		<!-- 查询区域-END -->

		<!-- 操作按钮区域 -->
		<div class="table-operator">
			<a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
			<a-button type="primary" icon="download" @click="handleExportXls('仓库管理-库存管理')">导出</a-button>
			<a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
			 @change="handleImportExcel">
				<a-button type="primary" icon="import">导入</a-button>
			</a-upload>
			<a-dropdown v-if="selectedRowKeys.length > 0">
				<a-menu slot="overlay">
					<a-menu-item key="1" @click="batchDel">
						<a-icon type="delete" />
						删除
					</a-menu-item>
				</a-menu>
				<a-button style="margin-left: 8px"> 批量操作
					<a-icon type="down" />
				</a-button>
			</a-dropdown>
		</div>

		<!-- table区域-begin -->
		<div>
			<div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
				<i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{
        selectedRowKeys.length }}</a>项
				<a style="margin-left: 24px" @click="onClearSelected">清空</a>
			</div>

			<a-table ref="table" size="middle" bordered rowKey="id" :scroll="{ x: 2500,y: 500  }" :columns="columns" :dataSource="dataSource" :pagination="ipagination"
			 :loading="loading" :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
			 @change="handleTableChange">

				<template slot="htmlSlot" slot-scope="text">
					<div v-html="text"></div>
				</template>
				<template slot="imgSlot" slot-scope="text">
					<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
					<img v-else :src="getImgView(text)" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;" />
				</template>
				<template slot="fileSlot" slot-scope="text">
					<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
					<a-button v-else :ghost="true" type="primary" icon="download" size="small" @click="uploadFile(text)">
						下载
					</a-button>
				</template>

				<span slot="action" slot-scope="text, record">
					<a @click="handleEdit(record)">编辑</a>

					<a-divider type="vertical" />
					<a-dropdown>
						<a class="ant-dropdown-link">更多
							<a-icon type="down" /></a>
						<a-menu slot="overlay">
							<a-menu-item>
								<a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
									<a>删除</a>
								</a-popconfirm>
							</a-menu-item>
						</a-menu>
					</a-dropdown>
				</span>

			</a-table>
		</div>

		<mesStockManage-modal ref="modalForm" @ok="modalFormOk"></mesStockManage-modal>
	</a-card>
</template>

<script>
	import '@/assets/less/TableExpand.less'
	import {
		mixinDevice
	} from '@/utils/mixin'
	import {
		JeecgListMixin
	} from '@/mixins/JeecgListMixin'
	import MesStockManageModal from './modules/MesStockManageModal'
	import JDate from '@/components/jeecg/JDate.vue'

	export default {
		name: "MesStockManageList",
		mixins: [JeecgListMixin, mixinDevice],
		components: {
			JDate,
			MesStockManageModal
		},
		data() {
			return {
				description: '仓库管理-库存管理管理页面',
				// 表头
				columns: [{
						title: '#',
						dataIndex: '',
						key: 'rowIndex',
						width: 60,
						align: "center",
						customRender: function(t, r, index) {
							return parseInt(index) + 1;
						}
					},
					{
						title: '创建人',
						align: "center",
						dataIndex: 'createBy'
					},
					{
						title: '创建日期',
						align: "center",
						dataIndex: 'createTime',
						customRender: function(text) {
							return !text ? "" : (text.length > 10 ? text.substr(0, 10) : text)
						}
					},
					{
						title: '物料料号',
						align: "center",
						dataIndex: 'materielCode'
					},
					{
						title: '品名',
						align: "center",
						dataIndex: 'materielName'
					},
					{
						title: '物料规格',
						align: "center",
						dataIndex: 'materielGague'
					},
					{
						title: '工厂编号',
						align: "center",
						dataIndex: 'factoryCode'
					},
					{
						title: '工厂名称',
						align: "center",
						dataIndex: 'factoryName'
					},
					{
						title: '仓库编号',
						align: "center",
						dataIndex: 'storeCode'
					},
					{
						title: '仓库名称',
						align: "center",
						dataIndex: 'storeName'
					},
          {
            title: '区域编码',
            align: "center",
            dataIndex: 'areaCode'
          },
          {
            title: '位置编码',
            align: "center",
            dataIndex: 'locationCode'
          },
					{
						title: '库存数量',
						align: "center",
						dataIndex: 'stockNum'
					},
          {
          	title: '库存临界点',
          	align: "center",
          	dataIndex: 'minimum'
          },
					{
						title: '单位',
						align: "center",
						dataIndex: 'unit'
					},
          {
            title: '期初库存',
            align: "center",
            dataIndex: 'query3'
          },
          {
            title: '期初日期',
            align: "center",
            dataIndex: 'query4'
          },
          {
            title: '类型',
            align: "center",
            dataIndex: 'query5'
          },
					{
						title: '操作',
						dataIndex: 'action',
						align: "center",
						fixed:"right",
						width: 147,
						scopedSlots: {
							customRender: 'action'
						}
					}
				],
				url: {
					list: "/storage/mesStockManage/list",
					delete: "/storage/mesStockManage/delete",
					deleteBatch: "/storage/mesStockManage/deleteBatch",
					exportXlsUrl: "/storage/mesStockManage/exportXls",
					importExcelUrl: "storage/mesStockManage/importExcel",
				},
				dictOptions: {},
        array:[],
        quyuId:'',
        array2:[],
        areaCode:'',
        locationCode:'',
			}
		},
		computed: {
			importExcelUrl: function() {
				return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
			},
		},
    mounted() {
      this.$http.get('storage/mesWarehouseArea/list',{
        params:{
          pageNo:1,
          pageSize:1000,
        }
      }).then(res=>{
        if(res.success){
          this.array = res.result.records
          // this.quyuId = this.array[0].id
          // this.areaCode = this.array[0].areaCode
          this.getArea()
        }else{
          this.$message.error(res.message)
        }
      })
    },
    methods: {
			initDictConfig() {},
      reset(){
        this.areaCode = ''
        this.locationCode = ''
        this.array2 = []
			  this.searchReset()
      },
      query(){
			  this.queryParam.areaCode = this.areaCode
			  this.queryParam.locationCode = this.locationCode
			  this.searchQuery()
      },
      getArea(){
			  this.array.forEach(item=>{
			    if (item.areaCode === this.areaCode){
			      this.quyuId = item.id
          }
        })
        this.array2 = []
        this.locationCode = ''
        this.$http.get('storage/mesWarehouseArea/queryMesWarehouseAreaLocationByMainId',{
          params:{
            id:this.quyuId
          }
        }).then(res=>{
          if(res.success){
            this.array2 = res.result
            this.locationCode = this.array2[0].locationCode
          }else{
            this.$message.error(res.message)
          }
        })
      },
		}
	}
</script>
<style scoped>
	@import '~@assets/less/common.less';
</style>
